<template>
	<view :class="currentTheme">
		<a-nabbar :name="isEdit ? '我的门店' : '切换门店'" />
      <mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view class=" u-padding-left-32 u-padding-right-32">
				<template  v-if="isEdit">
					<view class="text-color-DEDEDE u-font-22  u-padding-top-20">
						<item-search placeholder="搜索门店名或编号" @change="downCallback" v-model="form.name"></item-search>
					</view>
					<!-- <view class="u-text-center text-color-DEDEDE u-font-22">你还可以创建xx个门店！</view> -->
				</template>
				<view class="u-margin-top-20">
					<view  v-for="(item,index) in dataList" :key="index" class="u-margin-bottom-20" @click="goPath(item)">
						<list-item :showFooterRight="false" :isShare="false" :item="item" :showEdit="isEdit&&item.isEdit" @edit="getEdit" :showDelete="isEdit&&isStore" @remove="getRemove" itemTypeTxt="门店">
							<view slot="imageFixed" class="img-fixed" v-if="item.storeUserType&&item.id===loginForm.storeId">
								当前门店（{{item.storeUserType}}）
							</view>
							<view slot="content">
								<view class="text-color-9598a4 u-font-26 u-margin-top-20">
									门店编号：{{item.storeNo}}
								</view>
								<view class="text-color-9598a4 u-font-26 u-margin-top-20">
									总店长：{{item.dz}}
								</view>
								<view class="text-color-9598a4 u-font-26 u-margin-top-20">
									DM人数：{{item.dmUser&&item.dmUser.length || 0}}
								</view>
								<view class="text-color-9598a4 u-font-26 u-margin-top-20 address">
									门店地址：{{item.address}}
								</view>
							</view>
							<view slot="footer"  class="u-flex u-row-right">
								<view v-if="!isEdit&&item.id!==loginForm.storeId">
									<item-btn  @click="checkedStore(item)" width="190" height="64">切换到该门店</item-btn>
								</view>
							</view>
						</list-item>
					</view>
				</view>
        
			</view>
		</mescroll-body>
  
   
		<fixed-team v-if="isEdit&&isStore" btnText="创建门店" @btnClick="getEdit"></fixed-team>
		<model v-model="modalFlag" :show-title="false" show-cancel-button   cancel-color="#333333" :confirm-color="currentThemeObj.primary" @confirm="confirm" content="确认切换到该门店吗？" />
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import {deleteIds,add} from '@/api/crud.js'
	import model from '@/components/u-modal/u-modal.vue'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[upCallback],
		components: {
			model,itemSearch
		},
		data() {
			return {
				dataList:[],
				apiModule:'shopApi',
				apiType:'systemStore',
				value:'',
				form:{
					name:'',
         
				},
				timer:null,
				option:{},
				modalFlag:false,
      
			}
		},
		onLoad(option) {
			this.option = option;
		},
		computed: {
			isEdit() {
				const isAuth = this.loginForm.clerkRole=='DZ' //店长
				return this.option.type!=='selectStore' && (isAuth || this.isStore)
			},
			isStore(){
				return this.loginForm.userType=='store'
			},
      
		},
		methods: {
			dataListCallBack(){
				try{
					this.dataList = this.dataList.map(val=>{
						val.img = val.sliderImage.split(',')[0];
						val.dz = '暂未设置总店长';
						if(val.dzUser&&val.dzUser.length){
							const dz = val.dzUser.find(item=>item.uid===val.dzUid) || {};
							val.dz = dz.nickname || '暂未设置总店长'
						}
						const dmUser =  val.dmUser || [];
						const dzUser =  val.dzUser || [];
						const storePeople = [...dmUser,...dzUser]
						const myUserObj = storePeople.find(val=>val.uid==this.loginForm.uid) || {};
						const dzUserObj = dzUser.find(val=>val.uid==this.loginForm.uid) || {};
						val.storeUserType = myUserObj.clerkRole
						val.isEdit = this.isStore || dzUserObj.clerkRole==='DZ'
						return val;
					})
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			getEdit(id){
				this.$u.route({
					url:'/pagesA/storeList/storeDetail',
					params:{
						id
					}
				})
			},
			getRemove(id){
				deleteIds('',this.apiType,this.apiModule,id).then(res=>{
					this.$u.toast('删除成功');
					this.downCallback()
				})
			},
			//切换门店
			checkedStore(item){
				this.modalFlag = true;
				this.activeItem = item;
			},
			confirm(){
				add(this.activeItem.id+'',this.apiType,this.apiModule,'changeStore').then(res=>{
					this.$u.toast('切换成功')
					this.$store.dispatch('getInfo')
				})
			},
			//跳转详情
			goPath(item){
				if(this.isEdit){
					console.log(item)
					this.$u.route({
						url:"/pagesA/storeList/readonlyDetail",
						params:{
							id:item.id
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed{
		&-empty{
			height: 200rpx;
		}
		&-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			.add-person{
				margin: 30rpx;
				border-radius: 50rpx;
				line-height:88rpx ;
				text-align: center;
				color:white ;
				font-size: 34rpx;
				background-color: #765CFE;
			}
		}
	}
	.address{
		line-height: 40rpx;
	}
	.img-fixed{
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 20rpx 0  20rpx 0 ;
		background-color: $primary;
		font-size: 24rpx;
		color: white;
		padding:10rpx 15rpx;
	}

 
</style>
